<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    title="添加表格"
    size="39%"
    :visible.sync="visibility"
    :append-to-body="true"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="120px"
        style="width: 100%"
      >
        <el-form-item label="表头" prop="type">
          <el-radio-group v-model="type">
            <el-radio :label="1">无表头</el-radio>
            <el-radio :label="2">有表头</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row v-if="type === 1">
          <el-col :span="12">
            <el-form-item label="行" prop="rowCount">
              <el-input v-model="rowCount" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列" prop="colCount">
              <el-input v-model="colCount" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-table
          v-if="type === 2 && rowTitleList && rowTitleList.length > 0"
          :data="rowTitleList"
          :show-header="false"
          style="max-height: 200px; overflow-y: auto"
        >
          <el-table-column type="index" width="55" />
          <el-table-column min-width="100">
            <template slot-scope="{ row }">
              {{ row }}
            </template>
          </el-table-column>
          <el-table-column width="120">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleRemove(row)">
                编辑
              </el-button>
              <el-button type="text" @click="handleRemove(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item v-if="type === 2">
          <el-input v-model="rowTitle">
            <el-button slot="append" @click="handleAddRow()"
              >添加行标题</el-button
            >
          </el-input>
        </el-form-item>
        <el-table
          v-if="type === 2 && colTitleList && colTitleList.length > 0"
          :data="colTitleList"
          :show-header="false"
          style="max-height: 200px; overflow-y: auto"
        >
          <el-table-column type="index" width="55" />
          <el-table-column min-width="100">
            <template slot-scope="{ row }">
              {{ row }}
            </template>
          </el-table-column>
          <el-table-column width="120">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleRemove(row)">
                编辑
              </el-button>
              <el-button type="text" @click="handleRemove(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item v-if="type === 2">
          <el-input v-model="colTitle">
            <el-button slot="append" @click="handleAddCol()"
              >添加列标题</el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item>
          <div v-if="html" ref="HTML" style="text-align: left" v-html="html" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleCommit"> 确 定 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { toHtml, toTemplate, extractTemplateValue } from '../scripts/table'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    }
  },
  data() {
    return {
      type: 1,
      rowCount: 3,
      colCount: 3,
      rowTitleList: [],
      colTitleList: [],
      rowTitle: null,
      colTitle: null,
      html: null,
      editElementIdPrefix: 'XYE',
      valueList: [],
      tableId: null
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.reset()
      }
    },
    type(data) {
      this.reset()
    },
    rowCount(data) {
      this.reset()
    },
    colCount(data) {
      this.reset()
    }
  },
  mounted() {
    window.AbortController = (id) => {
      this.AbortController(id)
      // document.getElementById(id).addEventListener('keyup', function () {
      //   document.getElementById('test').innerHTML = user.inputValue
      // })
    }
  },
  methods: {
    AbortController(id) {
      console.log(id, 'eueueue')
      // const data = []
      // data[id] = document.getElementById(id).value
      // this.valueList[id] = document.getElementById(id).value || ''
      const htmlId = id.substring(0, id.indexOf('-'))
      this.tableId = htmlId
      const row = document.getElementById(htmlId).rows.length
      const col = document.getElementById(htmlId).rows[0].cells.length
      const tableData = new Array()
      for (var i = 0; i < row; i++) {
        tableData[i] = new Array()
        for (var j = 0; j < col; j++) {
          tableData[i].push('')
        }
      }
      const tableRow = id.substring(id.indexOf('-') + 1, id.indexOf('-') + 2)
      const tableCol = id.substring(id.lastIndexOf('-') + 1)
      tableData[tableRow][tableCol] = document.getElementById(id).value
      this.valueList = tableData
    },
    reset() {
      const options = {
        type: this.type,
        row: this.rowCount,
        col: this.colCount,
        value: this.valueList,
        rowTitleList: this.rowTitleList,
        colTitleList: this.colTitleList
      }
      this.html = toHtml(
        options,
        this.editElementIdPrefix + Math.random(),
        false
      )
    },
    handleAddRow() {
      if (!this.rowTitle || this.rowTitle.trim().length === 0) {
        this.$message.warning('标题不能为空')
        return
      }
      this.rowTitleList.push(this.rowTitle)
      this.rowTitle = null
      this.reset()
    },
    handleAddCol() {
      if (!this.colTitle || this.colTitle.trim().length === 0) {
        this.$message.warning('标题不能为空')
        return
      }
      this.colTitleList.push(this.colTitle)
      this.colTitle = null
      this.reset()
    },
    handleClose() {
      this.visibility = false
    },
    handleCommit() {
      var tb = document.getElementById(this.tableId) // table 的 id
      const value = extractTemplateValue(tb, this.tableId)
      const options = {
        type: this.type,
        row: this.rowCount,
        col: this.colCount,
        value: value,
        rowTitleList: this.rowTitleList,
        colTitleList: this.colTitleList
      }
      const html = toHtml(options, '', true)
      const content = toTemplate(options)
      console.log(html, content)
      this.$emit('add', {
        content: content,
        html: html
      })
      this.visibility = false
    }
  }
}
</script>

<style lang="scss">
</style>>
